<template>
  <div class="track_play_back components_init">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="clearfixText"><i class="el-icon-s-order" />轨迹回放</span>
      </div>
      <div class="track_play_back_body">
        <div class="track_play_back_body_text">
          <div class="track_play_back_body_text_item">
            <div class="card_title" style="font-size:15px;">
              <span>订单信息</span>
            </div>
            <div class="track_play_back_body_text_item_text">
              <div class="details_item">
                订单号：213213213213132
              </div>
              <div class="details_item">
                运单号：132132132132132
              </div>
            </div>
            <div class="track_play_back_body_text_item_text">
              <div class="details_item">
                装货单位:安安安
              </div>
              <div class="details_item">
                装货地:阿萨大大
              </div>
              <div class="details_item">
                提货时间：sdadasdasd
              </div>
            </div>
            <div class="track_play_back_body_text_item_text">
              <div class="details_item">
                卸货时间：撒大苏打
              </div>
              <div class="details_item">
                卸货地：撒大苏打撒
              </div>
              <div class="details_item">
                送达时间：阿三大苏打
              </div>
            </div>
          </div>
          <div class="track_play_back_body_text_item">
            <div class="card_title" style="font-size:15px;">
              <span>司机信息</span>
            </div>
            <div class="track_play_back_body_text_item_text">
              <div class="details_item">
                车牌号：213213213213132
              </div>
              <div class="details_item">
                司机：考虑考虑
              </div>
              <div class="details_item">
                司机电话：123132456465
              </div>
            </div>
          </div>
          <div class="track_play_back_body_locating_information">
            <div class="card_title" style="font-size:15px;">
              <span>定位信息</span>
            </div>
            <div class="track_locating_information_conter">
              <div class="track_locating_information_checkBox">
                <el-checkbox-group v-model="checkList" style="display:inline-block;margin-right:30px;">
                  <el-checkbox label="北斗定位" />
                  <el-checkbox label="APP定位" />
                </el-checkbox-group>
                <el-button size="mini">默认按钮</el-button>
              </div>
              <table>
                <tr class="table_header">
                  <td>
                    定位顶点
                  </td>
                  <td>
                    定位时间
                  </td>
                  <td>
                    定位渠道
                  </td>
                </tr>
                <tr class="table_body">
                  <td />
                  <td />
                  <td />
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="track_play_back_body_map">
          <trackPlay />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import trackPlay from '@/components/TrajectoryPlayback'
export default {
  components: {
    trackPlay
  },
  data() {
    return {
      checkList: [],
      value: true,
      xingxingvalue: null,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      activities: [
        {
          content: '鸿海物流公司',
          content2: '广东省 广州市 白云区 大院北路',
          timestamp: '2018-04-12 20:46',
          color: '#2297ef'
        },
        {
          content: '鸿海物流公司',
          content2: '广东省 广州市 白云区 大院北路',
          timestamp: '2018-04-03 20:46',
          color: '#ff9624'
        }
      ],
      dialogTableVisible: false
    }
  },
  methods: {
    handlesSucces() {},
    handlesError() {},
    handleChange(val) {
      console.log(val)
    },
    selectHistoryOrder(row) {
      console.log(row)
    },
    dialogSelect() {}
  }
}
</script>

<style lang='scss'>
.track_play_back{
  .track_play_back_body{
    display: flex;
    .track_play_back_body_text{
      flex: 1;
      .track_play_back_body_text_item{
        font-size: 14px;
        color: #6a6b69;
        .track_play_back_body_text_item_text{
          margin-bottom: 20px;
          .details_item{
            padding: 5px 0;
          }
        }
      }
      .track_play_back_body_locating_information{
        .track_locating_information_conter{
          .track_locating_information_checkBox{

          }
        }
      }
    }
    .track_play_back_body_map{
      flex: 2;
    }
  }
}
</style>

